import storageLocal from "@/utils/storage";

const state = {
	logo: storageLocal.get("showLogo") ?? true,
	tagsView: storageLocal.get("showTagsView") ?? true,
	sidebar: storageLocal.get("showNormalSidebar") ?? true,
	fixedHeader: storageLocal.get("fixedHeader") ?? true
};

const mutations = {
	TOGELE_LOGO: state => {
		state.logo = !state.logo;
		if (state.logo) {
			storageLocal.set("showLogo", true);
		} else {
			storageLocal.set("showLogo", false);
		}
	},
	TOGELE_TAGS_VIEW: state => {
		state.tagsView = !state.tagsView;
		if (state.tagsView) {
			storageLocal.set("showTagsView", true);
		} else {
			storageLocal.set("showTagsView", false);
		}
	},
	TOGGLE_SIDEBAR: state => {
		state.sidebar = !state.sidebar;
		if (state.sidebar) {
			storageLocal.set("showNormalSidebar", true);
		} else {
			storageLocal.set("showNormalSidebar", false);
		}
	},
	TOGGLE_FIXED_HEADER: state => {
		state.fixedHeader = !state.fixedHeader;
		if (state.fixedHeader) {
			storageLocal.set("fixedHeader", true);
		} else {
			storageLocal.set("fixedHeader", false);
		}
	}
};

const actions = {
	toggleLogo({ commit }) {
		commit("TOGELE_LOGO");
	},
	toggleTagsView({ commit }) {
		commit("TOGELE_TAGS_VIEW");
	},
	toggleSideBar({ commit }) {
		commit("TOGGLE_SIDEBAR");
	},
	toggleFixEDHeader({ commit }) {
		commit("TOGGLE_FIXED_HEADER");
	}
};

export default {
	namespaced: true,
	state,
	mutations,
	actions
};
